<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />

	<title>ComboBox in ScrollableView</title>

	<link href="../themes/custom/custom.css" rel="stylesheet">
        
	<script src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>
        
	<script>
		dojo.require("dojox.mobile");
		dojo.require("dojox.mobile.parser");
		dojo.require("dojox.mobile.compat");
		dojo.require("dojox.mobile.ScrollableView");
		dojo.require("dojox.mobile.RoundRect");
		dojo.require("dojox.mobile.Heading");
		dojo.require("dojox.mobile.ComboBox");
	</script>
</head>
<body style="visibility:hidden;">
  	<datalist>
		<select data-dojo-type="dijit.form.DataList" data-dojo-props='id:"states"' >
			<option value="top">top</option>
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AS">American Samoa</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="AE">Armed Forces Europe</option>
			<option value="AP">Armed Forces Pacific</option>
			<option value="AA">Armed Forces the Americas</option>
			<option value="CA">California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="DC">District of Columbia</option>
			<option value="FM">Federated States of Micronesia</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="GU">Guam</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MH">Marshall Islands</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="MP">Northern Mariana Islands</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="PR">Puerto Rico</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VI">Virgin Islands, U.S.</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY">Wyoming</option>
			<option value="bottom">bottom</option>
		</select>
	</datalist>

        <div data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props="selected:true">
          	<h1 data-dojo-type="dojox.mobile.Heading">top</h1>
		<div data-dojo-type="dojox.mobile.RoundRect">
			<p>Test</p>
			<p>
			<input type="text" data-dojo-type="dojox.mobile.ComboBox" data-dojo-props='value:"", list:"states"'>
			</p>
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Marimba
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Alarm
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Ascending
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Bark
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Bell Tower
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Blues
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Boing
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Crickets
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Digital
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Doorbell
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Duck
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Harp
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Motorcycle
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Old Car Horn
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Old Phone
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Piano Roll
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Pinball
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Robot
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Sci-Fi
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Sonar
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Strum
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Timba
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Time Passing
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Trill
		</div>
		<div dojoType="dojox.mobile.RoundRect">
			Xylophone
		</div>
          	<h1 data-dojo-type="dojox.mobile.Heading" fixed="bottom">bottom</h1>
        </div>
</body>
</html>
